import React, { Component } from "react";
import { $httpGet, $httpPost } from "../../../request";
import { Table, Pagination, Button, Message } from "element-react";
import { Image } from "antd";
import "./index.scss";
export default class Rubbish extends Component {
  state = {
    columns: [
      {
        label: "#",
        prop: "id",
        width: 220,
        align: "center",
      },
      {
        label: "作品标题",
        prop: "title",
        width: 250,
        align: "center",
      },
      {
        label: "姓名",
        prop: "realName",
        width: 250,
        align: "center",
      },
      {
        label: "手机号",
        prop: "phoneNum",
        width: 250,
        align: "center",
      },
      {
        label: "学校或职业",
        prop: "school",
        width: 300,
        align: "center",
      },
      {
        label: "作品图片",
        prop: "img_list",
        width: 280,
        align: "center",
        render: function (img_list) {
          return (
            <Image
              width={80}
              height={80}
              className="works_img"
              src={img_list.img_list[0]}
            />
          );
        },
      },
      {
        label: "操作",
        prop: "address",
        align: "center",
        render: (id) => {
          return (
            <div>
              <Button type="success" onClick={() => this.headleEduce(id.id)}>
                恢复
              </Button>
            </div>
          );
        },
      },
    ],
    data: [],
    // 商品列表数据的参数
    queryInfo: {
      state: 2,
      page: 1,
      page_size: 10,
    },
    total: 0,
    dataId: [],
  };
  // 挂载
  componentDidMount() {
    this.getDataList();
  }

  //数据
  getDataList() {
    $httpGet("admin/big-regis", this.state.queryInfo).then((res) => {
      if (res.code === 0 && res.data !== null) {
        this.setState({ data: res.data, total: res.count });
      }
    });
  }
  // 分页
  handleSizeChange = (size) => {
    return (pages) => {
      this.setState(
        { queryInfo: Object.assign({}, this.state.queryInfo, { [size]: pages,state: 2, }),},() => this.getDataList());
    };
  };

  //恢复
  headleEduce = (id) => {
    $httpPost("admin/recovery-big-regis", { r_id: id }).then((res) => {
      if (res.code !== 0)
        return Message({
          showClose: true,
          message: "数据恢复失败",
          type: "error",
        });
      this.getDataList();
      Message({
        showClose: true,
        message: "数据恢复成功",
        type: "success",
      });
    });
  };

  render() {
    let { queryInfo, total, columns, data } = this.state;
    return (
      <div>
        <div>
          <Table
            style={{ width: "100%" }}
            columns={columns}
            data={data}
            border={true}
          />
        </div>
        <div className="footer">
          <Pagination
            layout="total, sizes, prev, pager, next, jumper"
            total={total}
            pageSizes={[10, 20, 30, 40]}
            pageSize={queryInfo.page_size}
            currentPage={queryInfo.page}
            onSizeChange={this.handleSizeChange("page_size")}
            onCurrentChange={this.handleSizeChange("page")}
          />
        </div>
      </div>
    );
  }
}
